<template>
	<view>
		<view class="sys_bg" v-if="type==1">
			<image  src="/static/img/index_bg.png" mode=""></image>
		</view>
		<view class="header" :class="[scrollH>8&&'back',type==2&&'back']">
			<view :style="{height:$u.sys().statusBarHeight+'px'}"></view>
			<image v-if="type==1" class="image" src="/static/img/index_bg.png" mode=""></image>
			<view class="header_title"
				:style="{height:$u.addUnit($u.getPx(navbarHeight)),lineHeight:$u.addUnit($u.getPx(navbarHeight))}">
				<view class="tab" v-for="tab in tabs" :class="[tab.type==type&&'selected']"
					@click="selectTab(tab.type)">
					<view>{{tab.name}}</view>
					<view class="line"></view>
				</view>
			</view>
		</view>
		<heal-thcare v-if="type==1"></heal-thcare>
		<health-preservation v-if="type==2"></health-preservation>
	</view>
</template>
<script>
	import healThcare from '@/components/index/heal-thcare.vue'
	import healthPreservation from '@/components/index/health-preservation.vue'
	export default {
		components: {
			healThcare,
			healthPreservation
		},
		data() {
			return {
				navbarHeight: uni.$u.props.navbar.height,
				type: 2,
				scrollH: 0,
				tabs: [{
						name: '健康服务',
						type: 1
					},
					{
						name: '时辰养生',
						type: 2
					},
				]
			};
		},
		onPageScroll(res) {
			this.scrollH = res.scrollTop
		},
		onShow() {},
		onLoad() {},
		methods: {
			selectTab(type) {
				this.type = type
			}
		}
	};
</script>

<style lang="scss" scoped>
	.sys_bg {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 460rpx;
		z-index: -1;

		image {
			width: 100%;
			height: 100%;
		}

	}

	.header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10;
		overflow: hidden;
		padding-bottom: 10rpx;

		image {
			position: absolute;
			top: 0;
			left: 0;
			left: 0;
			width: 100%;
			height: 460rpx;
		}
	}

	.header_title {
		font-size: 36rpx;
		padding: 0 30rpx;
		display: flex;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #000000;

		.tab {
			margin-right: 30rpx;
			z-index: 10;
		}

		.selected {
			font-weight: bold;
			font-size: 38rpx;
			color: #000000;
			position: relative;
			letter-spacing: 2rpx;

			.line {
				position: absolute;
				left: 50%;
				bottom: 3rpx;
				transform: translateX(-50%);
				width: 100rpx;
				height: 10rpx;
				background: #05c2c5;
				border-radius: 5rpx;
			}
		}
	}

	.back {
		background-color: #b0ebee;
	}
</style>